<template>
  <div class="favorites-page">
    <header class="favorites-header">
      <h1>我的收藏my collection</h1>
    </header>

    <div class="container" @mouseover="hovering = true" @mouseleave="hovering = false">
      <div class="image" v-for="(item, index) in favoriteImages" :key="index">
        <a :href="item.link" target="_blank" rel="noopener noreferrer">  
          <img :src="item.src" :alt="item.alt" :class="{ 'hovered': hovering }" />
          <span class="caption">{{ item.caption }}</span>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hovering: false, // 用于控制鼠标悬停状态
      favoriteImages: [
        { src: require('../assets/gk.png'), alt: 'Image 1', link: 'https://www.bilibili.com/video/BV1c54y1d7nL?spm_id_from=333.788.videopod.episodes&vd_source=5a5d689864c32f6d6cd9b822df6221c4&p=3' }, 
        { src: require('../assets/iso.png'), alt: 'Image 2', link: 'https://www.bilibili.com/video/BV1c54y1d7nL?spm_id_from=333.788.videopod.episodes&vd_source=5a5d689864c32f6d6cd9b822df6221c4&p=2' }, 
        { src: require('../assets/dl.png'), alt: 'Image 3', link: 'https://www.bilibili.com/video/BV1c54y1d7nL?spm_id_from=333.788.videopod.episodes&vd_source=5a5d689864c32f6d6cd9b822df6221c4&p=19' }, 
      ],
    };
  },
};
</script>

<style scoped>
.favorites-page {
  max-width: 900px;
  margin: auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.favorites-header {
  margin-bottom: 20px;
  text-align: center;
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; 
}

.image {
  position: relative;
  overflow: hidden; 
  width: calc(33.333% - 10px); 
  transition: transform 0.3s;
}

.image img {
  width: 100%; 
  height: auto; 
  transition: filter 0.3s, transform 0.3s; 
}

.image:hover img {
  transform: scale(1.05); 
}

.container:hover .image img:not(:hover) {
  filter: blur(10px) grayscale(1); 
  transform: scale(0.9); 
}

.caption {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  padding: 5px;
  border-radius: 5px;
}
</style>